<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
            placeholder="角色名称"
            v-model="query.name"
            label="角色名称"
            prefix-icon="el-icon-search"
          ></el-input>
        </el-col>
        <el-col :span="3">
          <el-select v-model="query.status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <!-- 增删查按钮区域 -->
        <el-tooltip
          class="item"
          effect="light"
          content="添加用户"
          placement="top"
        >
          <el-button
            type="primary"
            icon="el-icon-edit-outline"
            circle
            @click="addDialogFormVisible = true"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="light"
          content="查找用户"
          placement="top"
        >
          <el-button
            icon="el-icon-search"
            circle
            @click="getUserManager"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="批量删除用户"
          placement="top"
        >
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delesomeprat()"
          ></el-button>
        </el-tooltip>
      </el-row>
      <!-- 用户列表区域 -->
      <div class="usertable">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          @selection-change="handleSelectionChange"
          ref="idList"
        >
          <el-table-column type="selection" width="60"> </el-table-column>
          <el-table-column type="index" width="60" label="序号">
          </el-table-column>
          <el-table-column prop="code" label="角色编码" width="120">
          </el-table-column>
          <el-table-column prop="name" label="角色名称" width="120">
          </el-table-column>
          <el-table-column prop="startime" label="生效日期" width="170">
          </el-table-column>
          <el-table-column prop="downtime" label="失效日期" width="170">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            :formatter="turnstat"
          >
            <template slot-scope="scope">
              <el-switch
                active-value="1"
                inactive-value="0"
                v-model="scope.row.status"
                @change="userStatechanged(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="right" label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="light"
                content="修改角色"
                placement="top"
              >
                <el-button
                  type="primary"
                  size="small"
                  @click="updatapart(scope.row)"
                  icon="el-icon-edit"
                  plain
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                content="删除角色"
                placement="top"
              >
                <el-button
                  type="danger"
                  size="small"
                  @click="deletedatapart(scope.row.id)"
                  icon="el-icon-delete"
                  plain
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                content="权限编辑"
                placement="top"
              >
                <el-button
                  type="warning"
                  size="small"
                  icon="el-icon-user"
                  plain
                  @click="gethavepowe(scope.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="query.size"
            :current-page="query.ipage"
            layout="sizes, prev, pager, next"
            :total="query.total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 增加角色区域 -->
    <div>
      <el-dialog
        title="添加角色:"
        :visible.sync="addDialogFormVisible"
        class="dialog"
        @close="addDialogClosed()"
      >
        <el-form
          :model="addPartList"
          :rules="addPartListRules"
          ref="addPartListRef"
          label-width="90px"
        >
          <el-row gutter="20">
            <el-col :span="13">
              <el-form-item label="角色编码:" prop="partnum">
                <el-input v-model="addPartList.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col :span="13">
              <el-form-item label="角色名称:" prop="partname">
                <el-input v-model="addPartList.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="生效日期:" prop="startdate">
            <el-date-picker
              v-model="addPartList.startime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="失效日期:" prop="losedate">
            <el-date-picker
              v-model="addPartList.downtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态:">
            <el-radio v-model="addPartList.status" label="1">有效</el-radio>
            <el-radio v-model="addPartList.status" label="0">无效</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addPart()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改角色区域 -->
    <div>
      <el-dialog
        title="修改角色:"
        :visible.sync="editDialogFormVisible"
        class="dialog"
        @close="editDialogClosed()"
      >
        <el-form
          :model="editPartList"
          :rules="editPartListRules"
          ref="editPartListRef"
          label-width="90px"
        >
          <el-row gutter="20">
            <el-col :span="13">
              <el-form-item label="角色编码:" prop="partnum">
                <el-input v-model="editPartList.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col :span="13">
              <el-form-item label="角色名称:" prop="partname">
                <el-input v-model="editPartList.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="生效日期:" prop="startdate">
            <el-date-picker
              v-model="editPartList.startime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="失效日期:" prop="losedate">
            <el-date-picker
              v-model="editPartList.downtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态:">
            <el-radio v-model="editPartList.status" label="1">有效</el-radio>
            <el-radio v-model="editPartList.status" label="0">无效</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updata()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 角色权限区域 -->
    <div>
      <el-dialog
        title="设置角色权限:"
        :visible.sync="powerFormVisible"
        class="dialog"
      >
        <el-tree
          :data="data"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :props="defaultProps"
          check-strictly
          :default-checked-keys="havelist"
          @click="addpwoer"
        >
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetChecked">清空</el-button>
          <el-button @click="powerFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addpwoer()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      PartPower: {
        partId: 0,
        menuIds: [],
      },
      //树形图
      data: [],
      //树形图默认勾选的选项
      havelist: [],
      defaultProps: {
        children: "menu",
        label: "name",
      },
      powerFormVisible: false,
      //搜索框 页码
      query: {
        name: "",
        status: "",
        ipage: 1,
        size: 5,
        total: 0,
      },
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "有效",
        },
        {
          value: "0",
          label: "无效",
        },
      ],

      tableData: [],
      //增加角色
      addDialogFormVisible: false,
      addPartList: {
        code: "",
        downtime: "",
        id: null,
        more: "",
        name: "",
        startime: new Date(),
        status: "",
        // partnum: "",
        // partname: "",
        // startdate: "",
        // losedate: "",
        // status: "",
      },
      //增加角色验证规则
      addPartListRules: {
        partnum: [
          //{ required: true, message: "请输入角色编码", trigger: "blur" },
        ],
        partname: [
          //{ required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
      //修改角色
      editDialogFormVisible: false,
      editPartList: {},
      //修改角色校验规则
      editPartListRules: {
        partnum: [
          //{ required: true, message: "请输入角色编码", trigger: "blur" },
        ],
        partname: [
          //{ required: true, message: "请输入角色名称", trigger: "blur" },
        ],
      },
      //用户列表数据
      idList: [],
    };
  },
  created() {
    this.getUserManager();
    this.getAllmenu();
  },
  methods: {
    //增加菜单权限
    addpwoer() {
      console.log(this.PartPower.partId);
      this.PartPower.menuIds = this.$refs.tree.getCheckedKeys();
      console.log(this.PartPower);
      this.$axios.post("/menu/partpower", this.PartPower).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("设置权限成功");
          this.powerFormVisible = false;
        } else {
          this.$message.error("设置权限失败");
        }
      });
    },
    //获取父级菜单
    gethavepowe(row) {
      this.PartPower.partId = row.id;
      this.$axios
        .get("/menu/gethavepart", {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          console.log(res);
          this.havelist = res.data.res;
          console.log(this.havelist);

          this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys(this.havelist);
          });
        });
      this.powerFormVisible = true;
      // this.$refs.tree.setCheckedNodes(this.havelist);
    },
    //获取所有菜单
    getAllmenu() {
      this.$axios.get("/menu/getmenuall").then((res) => {
        console.log(res);
        this.data = res.data.res;
      });
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    //获取修改角色数据
    updatapart(scope) {
      console.log(scope);
      this.editPartList = scope;
      console.log(this.editPartList);
      this.editDialogFormVisible = true;
    },
    //修改角色
    updata() {
      this.$refs.editPartListRef.validate((valid) => {
        if (!valid) return;
        console.log(this.editPartList);
        this.$axios.post("/part/updatepart", this.editPartList).then((res) => {
          if (res.status == 200) {
            this.$message.success("修改成功");
          } else {
            this.$message.error("修改失败");
          }
          this.editDialogFormVisible = false;
        });
      });
    },
    //修改角色状态
    userStatechanged(row) {
      this.$axios.post("/part/updatepart", row).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message.success("修改用户状态成功");
          this.getUserManager();
        } else {
          this.$message.error("修改用户状态失败");
        }
      });
    },
    handleSelectionChange(id) {
      this.idList = id;
      console.log(this.idList);
    },
    //删除角色
    deletedatapart(id) {
      this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$axios.get("/part/delepart?id=" + id).then((res) => {
            this.getUserManager();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    delesomeprat() {
      var list = [];
      this.idList.forEach((item) => {
        list.push(item.id);
      });
      console.log(list);
      this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$axios.post("/part/delepartlsit", list).then((res) => {
            console.log(res);
            this.getUserManager();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //转换状态类型
    turnstat(row, index) {
      if (row.status == "0") {
        return "无效";
      } else if (row.status == "1") {
        return "有效";
      }
    },
    //获取/查询角色管理列表
    getUserManager() {
      this.$axios
        .get("/part/selepart", {
          params: this.query,
        })
        .then((res) => {
          console.log(res);
          this.query.total = res.data.res.total;
          this.tableData = res.data.res.records;
          // this.total = res.data.res.total;
        });
    },
    //监听 pagesize改变
    handleSizeChange(newSize) {
      this.query.size = newSize;
      this.getUserManager();
    },
    //监听 页码改变
    handleCurrentChange(newCurrent) {
      this.query.ipage = newCurrent;
      this.getUserManager();
    },
    //增加角色
    addPart() {
      this.$refs.addPartListRef.validate((valid) => {
        if (!valid) return;
        this.$axios.post("/part/addpart", this.addPartList).then((res) => {
          console.log(res);
          this.addDialogFormVisible = false;
          this.$message.success("增加成功");
          this.getUserManager();
        });
      });
    },
    //监听增加角色框关闭
    addDialogClosed() {
      this.$refs.addPartListRef.resetFields();
    },
    editDialogClosed() {
      this.$refs.editPartListRef.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
span {
  font-size: 12px;
}

.el-button {
  position: relative;
  margin-left: 10px;
}

.el-table-column {
  text-align: center;
}

.usertable {
  margin-top: 20px;
}

.block {
  margin-top: 20px;
}
</style>
